<template>
  <view class="wrapName">
    <view class="header">
      <image class="bg" src="https://ainengli.hzjrsw.com/jkhx/loginBg.png" />
      <text class="title">尊敬的用户：</text>
      <text class="nickname">欢迎使用健康画像小程序!</text>
    </view>
    <view class="content">
      <view class="title">
        为了更好地保障您的个人信息权益及方便进行健康管理，我们依据相关法律法规制定了《健康画像小程序隐私保护指引》》、《用户协议》、《健康管理授权协议》、《申请使用权限》、《敏感个人信息处理情况的说明》、《儿童个人信息保护指引》、《第三方信息共享清单、《个人信息收集清单》，以帮助您了解我们对您的个人信息的处理情况以及您享有的相关权利。请您在使用我们的产品前，审慎阅读并充分理解相关条款。如您对隐私政策中的内容有任何疑问，可通过隐私政策中说明的联系方式与我们联系。
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in state.list" :key="index">
          <image
            v-if="item.showPopover"
            class="img"
            src="@/static/image/hmm/2.png"
            @tap="readFun(item)"
          />
          <image v-else class="img" src="@/static/image/hmm/3.png" @tap="readFun(item)" />
          <text class="protocolTitle" @tap="protocolFun(item)">{{ item.name }}</text>
        </view>
        <!-- <view class="item" @tap="readFun">
          <image
            v-if="state.showPopover"
            @tap="readFun"
            class="img"
            src="@/static/image/hmm/2.png"
          />
          <image v-else class="img" src="@/static/image/hmm/3.png" />
          <text class="protocolTitle" @tap="protocolFun">《健康画像小程序隐私保护指引》</text>
        </view> -->
      </view>
    </view>
    <view class="authenticationBtn">
      <view class="wrap">
        <view class="cancel" @tap="cancel">取消</view>
        <view class="goAuthentication" @tap="agree">同意</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { authorization } from '@/api/login/index'
import store from '@/store'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
const state = reactive({
  list: [
    {
      showPopover: true,
      name: '《健康画像小程序隐私保护指引》',
      id: 1
    }
    // {
    //   showPopover: true,
    //   name: '《用户协议》',
    //   id: 2
    // },
    // {
    //   showPopover: true,
    //   name: '《健康管理授权协议》',
    //   id: 3
    // },
    // {
    //   showPopover: true,
    //   name: '《申请使用权限》',
    //   id: 4
    // },
    // {
    //   showPopover: true,
    //   name: '《敏感个人信息处理情况的说明》',
    //   id: 5
    // },
    // {
    //   showPopover: true,
    //   name: '《儿童个人信息保护指引》',
    //   id: 6
    // },
    // {
    //   showPopover: true,
    //   name: '《第三方信息共享清单》',
    //   id: 7
    // },
    // {
    //   showPopover: true,
    //   name: '《个人信息收集清单》',
    //   id: 8
    // }
  ]
})
const userInfo = ref({})
onLoad(() => {
  init()
})

const init = () => {
  userInfo.value = store.state.userInfo
}
const readFun = (item) => {
  item.showPopover = !item.showPopover
}
const protocolFun = (item) => {
  uni.navigateTo({
    url: '/pages/login/guide'
  })
}
const cancel = () => {
  uni.navigateBack({
    delta: 1
  })
}
const agree = () => {
  let isAllSelect = true
  state.list.forEach((item) => {
    if (item.showPopover) {
      uni.showToast({
        title: '请勾选所有授权协议',
        icon: 'none',
        duration: 2000
      })
      isAllSelect = false
    }
  })
  if (isAllSelect) {
    authorization(userInfo.value).then((res) => {
      if (res.code == 0) {
        userInfo.value.isAuthorized = true
        store.commit('SET_USERINFO', userInfo.value)
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.wrapName {
  min-height: calc(100vh - 208rpx);
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  .header {
    height: 520rpx;
    position: relative;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 520rpx;
      z-index: 0;
    }
    .title {
      margin: 32rpx 32rpx 0 32rpx;
      display: inline-block;
      color: #222;
      font-size: 48rpx;
      font-weight: 700;
      position: relative;
      z-index: 2;
    }
    .nickname {
      margin: 16rpx 48rpx 0 48rpx;
      display: block;
      color: #666;
      font-size: 28rpx;
      position: relative;
      z-index: 2;
    }
  }
  .content {
    width: calc(100% - 64rpx);
    margin: -340rpx auto 0;
    padding: 32rpx 32rpx 24rpx;
    // margin-bottom: calc(198rpx + constant(safe-area-inset-bottom));
    // margin-bottom: calc(198rpx + env(safe-area-inset-bottom));
    border-radius: 16rpx;
    background: #fff;
    position: relative;
    z-index: 2;
    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #222;
      text-align: justify;
      line-height: 45rpx;
    }
    .list {
      margin-top: 24rpx;
      .item {
        // margin: 28rpx 0;
        font-size: 28rpx;
        color: #666;
        padding: 8rpx 0;
        .img {
          display: inline-block;
          vertical-align: middle;
          width: 40rpx;
          height: 40rpx;
          padding-right: 10rpx;
        }
        .agree {
          display: inline-block;
          vertical-align: middle;
        }
        .protocolTitle {
          display: inline-block;
          vertical-align: middle;
          color: #00d1b6;
        }
      }
    }
  }
  .authenticationBtn {
    position: fixed;
    // padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;

    background: #fff;
    .wrap {
      padding: 0 32rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      padding-top: 24rpx;
      padding-top: 24rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666;
      .cancel {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        margin-right: 24rpx;
        border: 1px solid #cfcfcf;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
      }
      .goAuthentication {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        background: #00d1b6;
        color: #fff;
      }
    }
  }
}
</style>
